<template>
    <a-modal v-model:visible="visibleProxy" :footer="null" :keyboard="false" :mask-closable="false" :width="520"
        :title="null" :closable="false" centered class="export-modal">
        <div class="ex-header">
            <div class="title">{{ title }}</div>
            <a class="close" role="button" @click.stop.prevent="visibleProxy = false">关闭</a>
        </div>

        <div class="ex-body">
            <div class="row">
                <div class="label">导出格式</div>
                <div class="value">
                    <a-radio-group v-model:value="localFormat">
                        <a-radio value="csv">CSV</a-radio>
                        <a-radio value="json">JSON</a-radio>
                    </a-radio-group>
                </div>
            </div>
        </div>

        <div class="ex-footer">
            <a-button type="link" class="cancel" @click.stop.prevent="visibleProxy = false">取消</a-button>
            <span class="sep">|</span>
            <a-button type="link" class="confirm" :loading="loading"
                @click.stop.prevent="emit('confirm', localFormat)">导出</a-button>
        </div>
    </a-modal>
</template>

<script lang="ts" setup>
import { computed } from 'vue'

const props = withDefaults(defineProps<{
    modelValue: boolean
    format?: 'csv' | 'json'
    loading?: boolean
    title?: string
}>(), {
    format: 'csv',
    loading: false,
    title: '导出'
})

const emit = defineEmits<{
    (e: 'update:modelValue', v: boolean): void
    (e: 'update:format', v: 'csv' | 'json'): void
    (e: 'confirm', v: 'csv' | 'json'): void
}>()

const visibleProxy = computed({ get: () => props.modelValue, set: v => emit('update:modelValue', v) })
const localFormat = computed({ get: () => props.format!, set: v => emit('update:format', v as 'csv' | 'json') })
</script>

<style lang="less" scoped>
:deep(.export-modal .ant-modal-content) {
    padding: 0;
}

:deep(.export-modal .ant-modal-body) {
    padding: 0;
}

.ex-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 24px 12px;
    border-bottom: 1px solid #eee;

    .title {
        font-weight: 600;
        font-size: 16px;
    }

    .close {
        color: #1677ff;
        cursor: pointer;
    }
}

.ex-body {
    padding: 18px 24px 24px;
    min-height: 120px;

    .row {
        display: flex;
        align-items: center;
        gap: 16px;
    }

    .label {
        width: 72px;
        color: #333;
    }
}

.ex-footer {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 14px 0 18px;
    border-top: 1px solid #f0f0f0;

    .cancel,
    .confirm,
    .sep {
        color: #1677ff !important;
    }

    .sep {
        margin: 0 8px;
    }
}
</style>
